<script>
  import { Router, Route, Link } from "svelte-routing";
  import Home from "./test/Home.svelte";
  import About from "./test/About.svelte";
  import Login from "./test/Login.svelte";
  import NotFound from "./test/NotFound.svelte";
  import UserLayout from "./test/user/UserLayout.svelte";
  import PrivateRoute from "./test/PrivateRoute.svelte";

  let isLoggedIn = false;

  function handleLogin() {
    isLoggedIn = true;
  }

  function handleLogout() {
    isLoggedIn = false;
  }
</script>

<Router>
  <nav>
    <div
      class="max-w-5xl mx-auto flex justify-center items-center px-4 py-6 sm:px-6 md:justify-center md:space-x-10"
    >
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
      <Link to="/user/profile">用户中心</Link>
      {#if isLoggedIn}
        <button on:click={handleLogout}>退出</button>
      {:else}
        <Link to="/login">登录</Link>
      {/if}
    </div>
  </nav>
  <!-- {isLoggedIn} -->
  <div class="max-w-80 mx-auto">
    <!-- 公开路由 -->
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/login">
      <Login onLogin={handleLogin} />
    </Route>

    <!-- 嵌套路由（需登录） -->
    <Route path="/user/*" let:params>
      <PrivateRoute {isLoggedIn}>
        <UserLayout />
      </PrivateRoute>
    </Route>

    <!-- 404 -->
    <Route path="*" let:params>
      <NotFound />
    </Route>
  </div>
</Router>
